import React, { Component } from 'react';
import {
  Animated,
  StatusBar,
  StyleSheet,
  ScrollView,
  Text,
  View,
  TouchableOpacity,
  Image
} from 'react-native';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
  }

  componentDidMount() {
    Animated.timing(                  // 随时间变化而执行动画
      this.state.fadeAnim,            // 动画中的变量值
      {
        toValue: 1,                   // 透明度最终变为1，即完全不透明
        duration: 2000,              // 让动画持续一段时间
      }
    ).start();                        // 开始执行动画
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 // 使用专门的可动画化的View组件
        style={{
          ...this.props.style,
          opacity: fadeAnim,         // 将透明度指定为动画变量值
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

export default class CCShop extends Component {

  state = {
    headText: '美好即将发生',
    headAuthor: '缝纫机乐队'
  }

  constructor(props) {
    super(props)
    this.getHitokoto = this.getHitokoto.bind(this)
  }

  componentDidMount() {
    setInterval(() => {
      this.getHitokoto()
    }, 10000)
  }

  render() {
    return (
      <ScrollView>
        <StatusBar backgroundColor={'#f892ac'}
          barStyle={'light-content'}
        />
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={{ color: 'white', fontSize: 17, fontWeight: '500' }}>Talk To</Text>
          </View>

          <View style={styles.ones}>
            <Text style={{ color: '#f892ac', fontSize: 30, lineHeight: 50, fontWeight: '500', textAlign: 'center' }}>『 {this.state.headText} 』</Text>
          </View>

          <View style={styles.twos}>
            <Text style={{ color: '#f892ac', fontSize: 17, fontWeight: '500' }}>-「{this.state.headAuthor}」</Text>
          </View>
          <FadeInView>
            <View style={{ marginTop: 50, alignItems: 'center', flexDirection: 'column', }}>
              <View style={styles.bottom1}>

                <TouchableOpacity style={styles.itemStyle}>
                  <View style={styles.imgT}>
                    <Image source={{ uri: 'head' }} style={{ height: 80, width: 80, borderRadius: 50, marginTop: 30 }}></Image>
                    <Text style={{ marginTop: 10, fontSize: 18, fontWeight: '300' }}>黑月</Text>

                    <Text style={{ color: '#252525', fontSize: 17, fontWeight: '300', marginTop: 15 }}>敬畏之心！</Text>
                  </View>
                </TouchableOpacity>
                <View style={styles.soild}></View>
                <TouchableOpacity style={styles.itemStyleR}>
                  <View style={styles.imgT}>
                    <Image source={{ uri: 'head' }} style={{ height: 80, width: 80, borderRadius: 50, marginTop: 30 }}></Image>
                    <Text style={{ marginTop: 10, fontSize: 18, fontWeight: '300' }}>纷羽</Text>
                    <Text style={{ color: '#252525', fontSize: 17, fontWeight: '300', marginTop: 15 }}>活着的事情</Text>
                  </View>
                </TouchableOpacity>
              </View>

              <View style={styles.bottom1}>

                <TouchableOpacity style={styles.itemStyle}>
                  <View style={styles.imgT}>
                    <Image source={{ uri: 'head' }} style={{ height: 80, width: 80, borderRadius: 50, marginTop: 30 }}></Image>
                    <Text style={{ marginTop: 10, fontSize: 18, fontWeight: '300' }}>黑月</Text>

                    <Text style={{ color: '#252525', fontSize: 17, fontWeight: '300', marginTop: 15 }}>敬畏之心！</Text>
                  </View>
                </TouchableOpacity>
                <View style={styles.soild}></View>
                <TouchableOpacity style={styles.itemStyleR}>
                  <View style={styles.imgT}>
                    <Image source={{ uri: 'head' }} style={{ height: 80, width: 80, borderRadius: 50, marginTop: 30 }}></Image>
                    <Text style={{ marginTop: 10, fontSize: 18, fontWeight: '300' }}>纷羽</Text>
                    <Text style={{ color: '#252525', fontSize: 17, fontWeight: '300', marginTop: 15 }}>活着的事情</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          </FadeInView>

        </View>
      </ScrollView>
    );

  }
  onScrollAnimationEnd(e) {
    //求当前页码:通过屏幕偏移量/屏幕宽度
    var currentPage = Math.floor(e.nativeEvent.contentOffset.x / 390 + 0.4);
    //更新状态机
    this.setState({
      activePage: currentPage
    });
  }

  getHitokoto() {
    fetch('https://v1.hitokoto.cn/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          headText: responseJson.hitokoto,
          headAuthor: responseJson.from
        });

      })
      .catch((error) => {
        console.error(error);
      });
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 895,
    backgroundColor: '#e3e3e3',
  },
  ones: {
    minHeight: 80,
    marginTop: 50,
    marginBottom: 20
  },
  twos: {
    flexDirection: 'row',
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20
  },
  test: {
    marginBottom: 10,
  },
  header: {
    backgroundColor: '#f892ac',
    flexDirection: 'row',
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomLeftRadius: 50,
    borderBottomRightRadius: 50,
    marginBottom: 20
  },
  box: {
    width: 340,
    height: 150,
    backgroundColor: '#ffffff'
  },
  flex: {
    flex: 1
  },
  row: {
    marginLeft: 10,
    width: 340,
    flexDirection: 'column',
    marginBottom: 10,
  },
  item: {

    height: 140,
    marginRight: 5,

    borderColor: '#ffffff',

  },
  img: {
    marginTop: 5,
    marginLeft: 5,
    width: 130,
    height: 140,
    backgroundColor: '#ffffff'
  },
  item_text: {
    paddingTop: 12,
    fontSize: 24,
    width: 180,
    color: '#898989',
    height: 30,
    lineHeight: 18,
    textAlign: 'center',
    marginTop: 15,
    marginLeft: 130,

  },
  item_text1: {
    paddingTop: 12,
    fontSize: 23,
    width: 180,
    color: '#fd8b04',
    height: 30,
    lineHeight: 18,
    textAlign: 'center',
    marginTop: 25,
    marginLeft: 130,

  },
  bottom1: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  imgT: {
    backgroundColor: '#fff',
    width: 170,
    height: 230,
    alignItems: 'center',
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    marginTop: 20
  },
  soild: {
    width: 6
  },
  itemStyleR: {
    // marginTop: 60,
  },

});